import { IconRight } from "@arco-design/web-react/icon";
import React from "react";
import Title, { SubTitle } from "./Title";

const PlatformCard = () => {
  const list = [
    {
      title: "更易落地",
      content:
        "充沛的公有云GPU资源池，创建模型瞬时可用，分钟级完成千卡扩缩容，保障业务稳定",
      img: "/platform1.png",
    },
    {
      title: "强大系统承载力",
      content:
        "提供联网插件、内容插件、知识库插件和扣子专业版AI应用开发平台，帮助企业构建应用",
      img: "/platform2.png",
    },
    {
      title: "安全可信",
      content:
        "通过传输加密、数据加密和安全沙箱等方法，在训练和部署模型过程中，有效保障数据安全",
      img: "/platform3.png",
    },
    {
      title: "专业算法服务",
      content:
        "专业算法团队提供业务诊断、训练优化、问题解答等服务，让企业AI应用轻松落地",
      img: "/platform4.png",
    },
  ];
  return (
    <div
      style={{
        backgroundImage: "url(cardbg.png)",
        backgroundSize: "cover",
        height: "100%",
        width: "100%",
      }}
      className="p-6"
    >
      <div className="text-center">
        <Title>火山方舟大模型服务平台</Title>
        <SubTitle>更强性能、更优插件、更好服务、安全可信</SubTitle>
        <div className="mt-4 text-blue-700 text-lg">
          了解火山方舟
          <IconRight />
        </div>
      </div>

      <div className="grid-cols-2 grid gap-4 mt-8">
        {list.map(({ title, content, img }, index) => {
          return (
            <div
              style={{
                background: "hsla(0, 0%, 100%, .6)",
              }}
              key={index}
              className="border rounded-lg"
            >
              <div className="p-4 b">
                <div className="font-bold pb-2">{title}</div>
                <div className="text-gray-700 overflow-hidden text-ellipsis line-clamp-2">
                  {content}
                </div>
              </div>
              <div className="flex justify-center">
                <img className="h-32" src={img} alt="" />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default PlatformCard;
